<template>
  <div >
    <div style="background-color:#fff;padding:10px 20px;">
      <span style="line-height:60px;font-size:26px; font-weight: bold">预处理的订单</span>
    </div>
    <el-card style="margin: 20px;">
      <el-form style="padding-top:10px;">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="分店选择" style="width:250px;">
              <el-select placeholder="请选择所属分店" v-model="searchForm.branchId" :disabled="user.role==='2'">
                <el-option v-for="item in branchOptions"
                           :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select placeholder="请选择" v-model="searchForm.status" :disabled="true">
                <!--              <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                <el-option label="未付款" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin: 20px;">
      <el-table :data="myOrders" style="margin: 20px;">
        <el-table-column type="index" width="80" align="center"  label="订单编号"></el-table-column>
        <el-table-column align="center" prop="branchId" label="餐厅名称" :formatter="formatRoleTable"></el-table-column>
        <el-table-column align="center" prop="tableId" label="餐桌" :formatter="formatTableTable"></el-table-column>
        <el-table-column align="center" prop="status" label="订单状态" :formatter="orderStatus"></el-table-column>
        <el-table-column align="center" prop="total" label="订单金额"></el-table-column>
        <el-table-column align="center" prop="remark" label="订单备注"></el-table-column>
        <el-table-column align="center" prop="createTime" label="下单时间" width="160px"></el-table-column>
        <el-table-column align="center" label="操作" width="200px">
          <!--        当订单状态为已付款时显示查看详情，和去评论按钮-->
          <template #default="scope">
            <el-button  link type="primary" @click="lookOrderDetail(scope.row.id)">订单详情</el-button>
            <el-button  type="success" size="default" @click="cashier(scope.row)">收银</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="cashierDialogVisible" title="收银" width="30%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="收银金额">
          <el-input v-model="payForm.paymentAmount" placeholder="请输入收银金额" disabled>
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="payForm.paymentType">
            <el-radio label="cash" value="0">现金</el-radio>
            <el-radio label="alipay" value="1">支付宝</el-radio>
            <el-radio label="wechat" value="2">微信</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="payForm.paymentType !== '0'" label="支付二维码">
          <img :src="paymentImage" alt="支付二维码" style="width: 250px; height: 350px;">
        </el-form-item>
        <el-form-item >
          <el-button type="success" @click="confirmPayment" style="margin: 0 50px" >已确认完成支付</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="orderDetailDialogVisible" title="订单详情" width="50%">
      <el-table :data="orderDetails" stripe style="width: 100%" >
        <el-table-column type="index" width="80" align="center" prop="id" label="订单详情编号"></el-table-column>
        <el-table-column align="center" prop="dish" label="菜品名称" width="180"></el-table-column>
        <el-table-column align="center" label="数量" width="180">
          <template #default="scope">
            x{{ scope.row.number }} 份
          </template>
        </el-table-column>
        <el-table-column align="center" label="单价" width="180">
          <template #default="scope">
            {{ scope.row.price }} 元
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cuisine" label="菜系" :formatter="dishTypeFormatter"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import store from "@/store";
// 获取我的个人订单
const myOrders = ref([]);
// 获取当前登录用户的个人信息
const user= ref(getUser());
// 定义查询条件对象
const searchForm = ref({
  branchId:user.value.branchId,
  status:'0'
})

// 定义存储订单详情的数组
const orderDetails = ref([]);
// 定义控制订单详情弹窗的显示与隐藏
const orderDetailDialogVisible = ref(false);
// 定义菜系的格式化的数组
const dishTypeOptions = ref([]);
// 定义菜系的格式化方法
const dishTypeFormatter=(row,column,cellValue,index)=>{
  if(!dishTypeOptions.value){
    return cellValue;
  }
  for(let item of dishTypeOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}
//

// 支付相关
// 定义Form 对象接收支付数据
const payForm = ref({
  id: '',
  paymentAmount: '',
  paymentType: '0'
});
// 定义收银弹窗的显示与隐藏
const cashierDialogVisible = ref(false);
// 定义图片二维码
const paymentImages = {
  0: '',
  1: '/imgs/payimg/payAlipay.jpg',
  2: '/imgs/payimg/payWeichar.jpg'
};
// 定义支付二维码
const paymentImage = computed(() => {
  return paymentImages[payForm.value.paymentType];
});

// 获取我的订单
const loadMyOrders = () => {
  // 转化查询字符串
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL+'/v1/orders/select?'+data).then((response)=>{
    if(response.data.code===2000){
      myOrders.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
// 定义收银的方法
const cashier = (row) => {
  payForm.value.id = row.id;
  payForm.value.paymentAmount = row.total;
  cashierDialogVisible.value = true;
}
// 定义确认付款的方法
const confirmPayment = () => {
  console.log(payForm.value);
  let data = qs.stringify(payForm.value);
  axios.post(BASE_URL+'/v1/orders/pay',data).then((response)=>{
    if(response.data.code===2000){
      ElMessage.success("支付已完成");
      cashierDialogVisible.value = false;

      loadMyOrders();
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
// 定义查看订单详情的方法
const lookOrderDetail = (orderId) => {
  // 设置弹窗可见
  orderDetailDialogVisible.value = true;
  // 定义获取订单详情的方法
  axios.get(BASE_URL+'/v1/orderDetail/selectDish?id='+orderId).then((response)=>{
    if(response.data.code===2000){
      orderDetails.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
// 关闭弹窗
const handleClose = () => {
  cashierDialogVisible.value = false;
  // 清空表单数据
  orderDetails.value=[];
}
// 定义订单状态的显示
const orderStatus = (row,column,cellValue,index)=>{
  switch (cellValue) {
    case '0':
      cellValue = '未付款';
      break;
    case '1':
      cellValue = '已付款';
      break;
    case '2':
      cellValue = '已选餐桌';
      break;
    case '3':
      cellValue = '已评论';
      break;
  }
  return cellValue;
}

// 加载数据
onMounted(
    ()=>{
      loadMyOrders();
      getBranchs(branchOptions);
      getTables(tableOptions);
      getCookingTypes(dishTypeOptions);
    }
)
// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};

//定义方法用来维护支付方式的显示
const payName = (row,column,cellValue,index)=> {
  switch (cellValue) {
    case '0':
      cellValue = '现金';
      break;
    case '2':
      cellValue = '微信';
      break;
    case '1':
      cellValue = '支付宝';
  }
  return cellValue;
}
// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}

</script>

<style scoped>

</style>